<script>
  import qChart from '../../PUBLIC/qChart.vue'

  export default {
    props: ['footerHidden'],
    components:{qChart},
    data() {
      return {
      }
    },
    methods:{
      hiddenFooter(){
        this.$emit('hiddenChange',!this.footerHidden)
      },
      /**
       * 扫码图片的上下滑
       * @param e
       */
      saoMaTouchMove(e) {
//        e.stopPropagation()
      },
      /**
       * 手势滑动
       * */
      divTouchStart(e) {
//        e.preventDefault();
        this.startX = e.changedTouches[0].pageX;
        this.startY = e.changedTouches[0].pageY;
      },
      divTouchMove(e) {
//        e.preventDefault();
        let moveEndX = e.changedTouches[0].pageX,
          moveEndY = e.changedTouches[0].pageY,
          X = moveEndX - this.startX,
          Y = moveEndY - this.startY;

        if (Math.abs(X) > Math.abs(Y) && X > 0) {
//          alert("left 2 right");
        }
        else if (Math.abs(X) > Math.abs(Y) && X < 0) {
//          alert("right 2 left");
        }
        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
//          alert("top 2 bottom");
          this.$emit('hiddenChange',true)

        }
        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
//          alert("bottom 2 top");
          this.$emit('hiddenChange',false)

        }
        else {
//          alert("just touch");
        }
      },

    },
    watch:{
    }
  }
</script>
<template>
  <!--扫码-->
  <div class="szg_plainScore_saoma" :class="{hidden:footerHidden}">
      <span @touchmove="saoMaTouchMove" class="szg_plainScore_slide_down"
            :class="{szg_plainScore_slide_up:footerHidden}" @click="hiddenFooter"
            :style="{marginTop:footerHidden?'1em':'2.109em'}"></span>
    <div class="szg_plainScore_saoma_btn">
      <qChart></qChart>
      <span>扫码支付</span>
    </div>
  </div>
</template>
<style>

</style>
